@charset 'UTF-8';
@import "./iconfont.scss";

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
}

body {
    background-color: #161535;
    overflow-y: auto;
    overflow-x: hidden;
}
img {
    width: 100%;
}
ul li {
    list-style: none;
}

.web {
    header {
        width: 100%;
        background-color: #090428;
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25vw 1.93vw;
            font-size: 1vw;
            .navLeft {
                display: flex;
                .logo {
                    width: 6vw;
                    height: 1.56vw;
                    overflow: hidden;
                }
                ul {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    li {
                        a {
                            color: #fff;
                            padding: 0.4vw 1.5vw;
                        }
                        .active {
                            color: #f3b652;
                        }
                    }
                }
            }
            .navRight {
                display: flex;
                .navLink {
                    a {
                        color: #a2a2a2;
                        padding: 0.4vw 1.5vw;
                    }
                }
                select {
                    border: none;
                    background-color: #090428;
                    color: #a2a2a2;
                    outline: none;
                }
            }
        }
    }
    main {
        padding-bottom: 3.49vw;
        .slideBox {
            width: 100%;
            height: 43.89vw;
            background-color: #222222;
            .sildeCenter {
                position: relative;
                width: 87.29vw;
                height: 100%;
                margin: 0 auto;
                .sildeTop {
                    width: 60vw;
                    margin: 0 auto;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .tryGame {
                        position: relative;
                        width: 17.92vw;
                        height: 28.82vw;
                        background: url(../img/shou.png) no-repeat;
                        background-size: 17.92vw 28.82vw;
                        color: #a1a1a1;
                        font-size: 1.25vw;
                        p {
                            display: inline-block;
                            position: absolute;
                            left: 50%;
                            top: 18vw;
                            transform: translateX(-50%) scale(0);
                            width: 11vw;
                            opacity: 0;
                        }
                    }
                    .more {
                        width: 20.9vw;
                        color: #2ce4ca;
                        .textBox {
                            width: 100%;
                            .title {
                                font-size: 2.15vw;
                            }
                            h5 {
                                font-size: 2.71vw;
                                font-weight: 400;
                            }
                            .des {
                                position: relative;
                                width: 100%;
                                height: 5vw;
                                font-size: 1.25vw;
                                color: #a1a1a1;
                                margin: 1vw 0;
                                p {
                                    position: absolute;
                                    left: 0;
                                    top: 0;
                                    // 多行文本溢出
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 3;
                                    -webkit-box-orient: vertical;
                                    transform: translateX(200%);
                                    opacity: 0;
                                }
                            }
                        }
                        button {
                            padding: 1.18vw 1.94vw;
                            color: #fff;
                            font-size: 1.25vw;
                            border: none;
                            border-radius: 4vw;
                            background: linear-gradient(#14c3b5, #0d9f90);
                            margin-top: 1vw;
                            cursor: pointer;
                        }
                    }
                }
                .silde {
                    width: 17.99vw;
                    height: 35.14vw;
                    position: absolute;
                    left: 48%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    background: url(../img/sj.png) no-repeat;
                    background-size: 17.99vw 35.14vw;
                    overflow: hidden;
                    .sildeBox {
                        position: absolute;
                        left: 51%;
                        top: 49%;
                        transform: translate(-50%, -50%);
                        width: 14.93vw;
                        height: 26.67vw;
                        overflow: hidden;
                        
                        .itemBox {
                            width: 100%;
                            height: 100%;
                            font-size: 0;
                            white-space: nowrap;
                            transition: all .5s;
                            .item {
                                display: inline-block;
                                width: 14.93vw;
                                height: 26.67vw;
                                overflow: hidden;
                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                    }
                }
                .slideNav {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    margin-top: 2vw;
                    padding-right: 3vw;

                    .navLeft,
                    .navRight {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        li {
                            width: 7.22vw;
                            height: 7.22vw;
                            border-radius: 50%;
                            border: 0.2vw solid #ccc;
                            overflow: hidden;
                            cursor: pointer;
                            margin: 0.5vw;
                            transition: border .5s;
                        }
                        .active {
                            border-color: red;
                        }
                    }
                }
            }
        }
        .luckyDraw {
            width: 50.36vw;
            margin: 0 auto;
            .luckyDrawTop {
                height: 3vw;
                background-color: #201a48;
                margin: 1.72vw 0;
                text-align: center;
                overflow: hidden;
                .silde {
                    height: 3vw;
                    display: inline-block;
                    transition: all 0.5s;
                    .item {
                        display: flex;
                        align-items: center;
                        height: 100%;
                        color: #fff;
                        font-size: 1.2vw;

                        i {
                            color: #faaa27;
                            font-size: 1vw;
                            margin-right: 0.5vw;
                        }
                    }
                }
            }
            .luckyDrawBottom {
                width: 50.36vw;
                display: flex;
                justify-content: space-between;
                .rotaryTable {
                    width: 34.22vw;
                    height: 30.89vw;
                    background-color: #201a48;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .bigBoder {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 28.7vw;
                        height: 28.7vw;
                        border: 0.1vw solid rgba(255, 255, 255, 0.1);
                        border-radius: 50%;
                        .middleBoder {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 26.35vw;
                            height: 26.35vw;
                            border-radius: 50%;
                            border: 0.1vw solid rgba(255, 255, 255, 0.1);
                            .smallBorder {
                                position: relative;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                width: 23.33vw;
                                height: 23.33vw;
                                border: 0.23vw solid #fbb234;
                                border-radius: 50%;
                                .discBox {
                                    position: relative;
                                    width: 19.79vw;
                                    height: 19.79vw;
                                    border-radius: 50%;
                                    border: 0.21vw solid #fe8b36;
                                    background-color: #fed98d;
                                    overflow: hidden;
                                    box-shadow: 0px 0px 0.5vw #fe8b36, 0px 0px 0 0.78vw #ffdf8f;

                                    .item {
                                        position: absolute;
                                        left: 50%;
                                        top: 0;
                                        transform: translateX(-50%);
                                        border-top: 9.89vw solid #ffe3bc;
                                        border-left: 6.34vw solid transparent;
                                        border-right: 6.34vw solid transparent;
                                        transform-origin: bottom center;
                                        .text {
                                            position: absolute;
                                            left: 50%;
                                            top: -9.5vw;
                                            transform: translateX(-50%);
                                            font-size: 1.2vw;
                                            line-height: 1.5;
                                            text-align: center;
                                            color: #fe8b36;
                                            .imgBox {
                                                width: 3.23vw;
                                                height: 3.96vw;
                                                margin: 0 auto;
                                                overflow: hidden;
                                            }
                                            p {
                                                white-space: nowrap;
                                            }
                                        }
                                    }
                                    .item:nth-child(2n) {
                                        border-top-color: #fff;
                                    }
                                }
                                .luckyDrawBtnBorder {
                                    position: absolute;
                                    left: 50%;
                                    top: 50%;
                                    transform: translate(-50%, -50%);
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    width: 6.61vw;
                                    height: 6.61vw;
                                    background-color: #fff;
                                    border-radius: 50%;
                                    border: 0.57vw solid #feba65;
                                    .luckyDrawBtnSmallBorder {
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        width: 4.69vw;
                                        height: 4.69vw;
                                        border-radius: 50%;
                                        background-color: #df2209;
                                        border: 0.1vw solid #fea05a;
                                        text-align: center;

                                        .luckyDrawBtn {
                                            display: flex;
                                            align-items: center;
                                            color: #fff6cc;
                                            font-size: 1.26vw;
                                            font-weight: 700;
                                            width: 4vw;
                                            height: 4vw;
                                            padding: 0 0.5vw;
                                            cursor: pointer;
                                            border-radius: 50%;
                                            background-color: #fe5251;
                                        }
                                    }
                                    .luckyDrawBtnSmallBorder::after {
                                        content: "";
                                        display: block;
                                        position: absolute;
                                        top: -1vw;
                                        border-bottom: 1.6vw solid #df2209;
                                        border-left: 0.78vw solid transparent;
                                        border-right: 0.78vw solid transparent;
                                    }
                                }
                            }
                        }
                    }
                }
                .results {
                    width: 14.22vw;
                    height: 30.89vw;
                    background-color: #201a48;
                    color: #fff;
                    font-size: 0.8vw;
                    text-align: center;
                    padding-top: 1.3vw;
                    .prompt {
                        p {
                            display: inline-block;
                            padding: 0.57vw 0.52vw;
                            background-color: #4e3eb4;
                            border-radius: 0.96vw;
                            margin: 0 0.63vw;
                        }
                        .LotteryNumber {
                            color: #fbb234;
                            margin: 0.3vw;
                        }
                    }
                    .prompt::before,
                    .prompt::after {
                        content: "";
                        display: inline-block;
                        width: 0.36vw;
                        height: 0.36vw;
                        border-radius: 50%;
                        background-color: #4e3eb4;
                    }
                    .resultsBox {
                        padding: 1vw 0 0 1.15vw;
                        .title {
                            width: 11.98vw;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            color: #9785ff;
                            p {
                                padding: 0.78vw 1.25vw;
                            }
                        }
                        .resultsNav{
                            width: 100%;
                            height: 23vw; 
                            overflow-x: hidden;
                            overflow-y: auto; 
                            scrollbar-shadow-color: #292256;
                            ul {
                                width: 100%;
                               
    
                               
    
                                li {
                                    display: flex;
                                    justify-content: space-between;
                                    border-top: 0.1vw solid #1d1347;
                                    padding: 0.63vw 0;
                                    p:first-child {
                                        width: 7vw;
                                        flex: 0 0 auto;
                                    }
                                    p:last-child {
                                        width: 3.5vw;
                                        flex: 0 0 auto;
                                        overflow: hidden;
                                        white-space: nowrap;
                                        text-overflow: ellipsis;
                                        text-align: left;
                                    }
                                }
                            }
                        }
                        
                        ::-webkit-scrollbar {
                            width: 0.63vw;
                        }
                        ::-webkit-scrollbar-thumb {
                            background-color: #292256;
                        }
                    }
                }
            }
        }
        .rules {
            width: 50.36vw;
            margin: 0 auto;
            padding: 0 0.57vw;
            font-size: 1vw;
            margin-top: 3.59vw;
            h3 {
                display: inline-block;
                font-size: 2 vw;
                letter-spacing: 0.07vw;
                color: transparent;
                background: linear-gradient(to top, #2780fa, #86eaff);
                background-clip: text;
                -webkit-background-clip: text;
            }
            ol {
                list-style: none;
                color: #b0aad5;
                padding-right: 2.24vw;
                li {
                    line-height: 2;
                    span {
                        color: #318bfa;
                    }
                }
            }
        }
        // 中奖提示框
        .mask {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            display: none;
            .dialog {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                background-color: #f6eedb;
                font-size: 1.2vw;
                text-align: center;
                padding: 3vw;
                color: #000;
                .prompt {
                    span {
                        padding: 0 1vw;
                    }
                }
                .prompt::before,
                .prompt::after {
                    content: "";
                    display: inline-block;
                    width: 2vw;
                    height: 0.1vw;
                    background-color: #000;
                    vertical-align: middle;
                }
                .shop {
                    margin-top: 1vw;
                    font-size: 1.5vw;
                    color: #d80e0e;
                    .imgBox {
                        width: 8vw;
                        height: 8vw;
                        margin: 1vw auto;
                    }
                }
                button {
                    color: #a44900;
                    background: linear-gradient(#ffd86f, #faac2a);
                    border: none;
                    font-size: 1.2vw;
                    padding: 1vw 5vw;
                    border-radius: 0.5vw;
                    cursor: pointer;
                }
                .close {
                    position: absolute;
                    right: 0.3vw;
                    top: 0.3vw;
                    display: inline-block;
                    color: #000;
                    font-size: 3vw;
                    line-height: 1.5vw;
                }
            }
        }
    }
    footer {
        width: 100%;
        background-color: #17171b;
        padding: 3.5vw;
        .footerBox {
            width: 60vw;
            margin: 0 auto;
            font-size: 1vw;
            color: #5e5f65;
            display: flex;
            justify-content: space-between;
            .footerLeft {
                display: flex;

                dl {
                    margin: 0 2vw;
                    dt {
                        font-size: 1.2vw;
                        color: #fff;
                        margin-bottom: 1vw;
                    }
                    dd {
                        line-height: 2.5vw;
                    }
                }
            }
            .footerRight {
                text-align: right;
                .footerLogo {
                    display: inline-block;
                    width: 7vw;
                    height: 2vw;
                    overflow: hidden;
                }
                .nav {
                    margin: 2vw 0;
                    a {
                        display: inline-block;
                        width: 2.5vw;
                        height: 2.5vw;
                        line-height: 2.5vw;
                        text-align: center;
                        border: 0.1vw solid #5e5f65;
                        color: #5e5f65;
                        border-radius: 50%;
                        margin: 0 0.5vw;
                        i {
                            font-size: 1.5vw;
                        }
                    }
                }
                p {
                    font-size: 0.8vw;
                }
            }
        }
    }
}

.scaleOut {
    animation: scaleOut 2s forwards;
}
.scaleIn {
    animation: scaleIn 2s forwards;
}
.leftOut {
    animation: leftOut 2s forwards;
}
.leftIn {
    animation: leftIn 2s forwards;
}
@keyframes scaleOut {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    40%{
        transform: translateX(-50%) scale(.7) rotate(-90deg);
        opacity: 1;
    }
    60%{
        transform: translate(-50%,200px) scale(0.5) rotate(-90deg);
        opacity: .5;
    }
    100% {
        transform: translate(-50%,200px) scale(0);
        opacity: 0;
    }
}
@keyframes scaleIn {
    0% {
        transform: translateX(-50%) scale(0);
        opacity: 0;
    }
    50%{
        transform: translateX(-50%) scale(1.5);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
}

@keyframes leftOut {
    0% {
        transform: translate(0,0);
        opacity: 1;
    }
    100% {
        transform: translate(100vw,-30vw);
        opacity: 0;
    }
}

@keyframes leftIn {
    0% {
        transform: translate(100vw,-30vw);
        opacity: 0;
    }
    100% {
        transform: translate(0,0);
        opacity: 1;
    }
}
